<template>
  <div class="main houseBox">
    <div class="searchBox clearfix">    
    	<div class="searchContent ">
	    	<el-select v-model="param.provinceCode" style="width:120px;" clearable placeholder="请选择省" :disabled="shengStatus" @change="citySearch"  class="searchItem">
	            <el-option
	            v-for="item in provinceList"
	            :key="item.id"
	            :label="item.cityName"
	            :value="item.id">
	            </el-option>
	         </el-select>

	        <el-select v-model="param.cityCode"  style="width:120px;" clearable placeholder="请选择市" :disabled="shiStatus" @change="countySearch"  class="searchItem">
	            <el-option
	            v-for="item in cityList"
	            :key="item.id"
	            :label="item.cityName"
	            :value="item.id">	            
	            </el-option>
	        </el-select>
	        <el-select v-model="param.countyCode"  style="width:120px;" clearable placeholder="请选择区" :disabled="quStatus"  class="searchItem">
	            <el-option
	            v-for="item in countyList"
	            :key="item.id"
	            :label="item.cityName"
	            :value="item.id">
	            </el-option>
	        </el-select>
    		<el-input
			  placeholder="房屋名称"
			  v-model="param.houseName"
			  clearable>
			</el-input>
			<el-input
			  placeholder="房主姓名"
			  v-model="param.houseOwnerName"
			  clearable>
			</el-input>			
			<el-button @click="tableList">查找</el-button>    		
    	</div>     	
    </div>
    <div class="tableList">
	    <el-table :data="list.rows"  border  >
	        <el-table-column label="房屋名称" > 
	           <template slot-scope="scope">
	                <span>{{ scope.row.houseName }}</span>
	            </template>           
	        </el-table-column>        	       
	        <el-table-column label="房型" >
	            <template slot-scope="scope">
	                <span>{{scope.row.roomNum}}室{{scope.row.parlourNum}}厅</span>
	            </template>
	        </el-table-column>	  	
	        <el-table-column label="省/市/区/街道"  >
	            <template slot-scope="scope">
	                <span>{{ scope.row.provinceName }}{{ scope.row.cityName }}{{ scope.row.countyName }}{{ scope.row.streetName }}</span>
	            </template>
	        </el-table-column>	 			   
	        <el-table-column label="房间详址" width="300" >
	            <template slot-scope="scope">
	                <p class="dizhi">{{ scope.row.addressDetail }}</p>
	            </template>
	        </el-table-column>
	        <el-table-column label="房主">
	            <template slot-scope="scope">
	                <span>{{ scope.row.houseOwnerName }}</span>
	            </template>
	        </el-table-column>
 			<el-table-column label="房态">
	            <template slot-scope="scope">
	                <span>{{ scope.row.houseStatusEnum.value }}</span>
	            </template>
	        </el-table-column>			
	        <el-table-column label="身份证正反照">
	            <template slot-scope="scope">
	                <span ><i class="el-icon-picture" @click="showPic(scope.row,'身份证',2)"></i></span>
	            </template>
	        </el-table-column>
	             <el-table-column label="房产证">
	            <template slot-scope="scope">
	                <span ><i class="el-icon-picture" @click="showPic(scope.row,'房产证',1)"></i></span>
	            </template>
	        </el-table-column>	                 
	        <el-table-column  label="操作">
		      <template slot-scope="scope">
		        <el-button
		          size="mini"
		          class="orangeBtn"
		          @click="Reject(scope.row,'REJECTED')">驳回</el-button>
		        <el-button
		          size="mini"
		          type="danger"
		          class="greenBtn"
		          @click="Pass( scope.row,'AUDITED')">通过</el-button>
		      </template>
		    </el-table-column>
	                 
	    </el-table>
    </div>  
    <div class="pagination">   
         <el-pagination
            @size-change="changeNum"
            @current-change="changePage"
            :current-page="param.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="param.pageSize"
            layout="total, prev, pager, next,sizes"
            :total="list.total">
        </el-pagination>
    </div>
<!-- 合同图片弹 -->
		<show-img  ref="detailDialog" :dialogShowImg="dialogShowImg" ></show-img>
		<reject ref="detailDialogReject" @fatherMethod="tableList" ></reject>

  </div>
</template>

<script>
import { mapState } from 'vuex';
import showImg from '@/components/showImg';
import reject from '@/components/reject';
export default {
	name: 'leasingInfo',
	components:{showImg,reject},
	data () {
		return {
			dialogShowImg:false,		
			idNum:'',
			url:'/house/page',
			RejectPassUrl:'/house/status/edit',
			param: {				
				provinceCode:null,
                cityCode:null,                  
                countyCode:null,
                houseName:null,
                houseOwnerName:null,                          
                pageNum: 1,
                pageSize: 10,    	          
			},
			RejectPassParam:{
				houseId:null,
				houseOperation:null,
				id: null ,
				version:null
			},		
			cityId:null,
			provinceList:[],//省数据  
            cityList:[],
            countyList:[], 
			shengStatus:false,
            shiStatus:false,
            quStatus:false	
		}
	},
	methods: { 		

	 	changeNum(val) {   
	 		this.param.pageNum=1;        
	        this.param.pageSize = val; 
	        this.$store.dispatch('getlist',{param:this.param,url:this.url});       
	    },
	    changePage(val) { 
	        this.param.pageNum=val;   
	       	this.$store.dispatch('getlist',{param:this.param,url:this.url});       	       
	    }, 
	    tableList(){
	    	this.$store.dispatch('getlist',{param:this.param,url:this.url}); 
	    },
	    showPic(row,title,type){
	    	this.dialogShowImg=true;
	    	this.$refs.detailDialog.loadDialogData(row,title,type);	    	
	    },
	    citySearch(){ 

	        this.cityList=[];
	        this.countyList=[];
	        this.param.cityCode=null;
	        this.param.countyCode=null;
	        this.address(this.param.provinceCode,1);
	    },
	    countySearch(){
	        this.countyList=[];
	        this.param.countyCode=null;
	        if(this.param.cityCode){
	            this.address(this.param.cityCode,2);
	        }       
	    }, 
		//省市区
	    address(cityIdVal,index){                  
	              
	        this.$axios({
	            method: "get",
	            url: '/city/obtinCityInfoList',
	            params:{
	                pid:cityIdVal
	            },
	            headers: {
	                "Content-Type": "application/json;charset=UTF-8"
	            }
	        }).then(res => {               
	            if (res.data.code == 0) { 
	                if(index==0){
	                    this.provinceList=res.data.data;    
	                }
	                if(index==1){                  
	                    this.cityList=res.data.data; 
	                    // this.where.cityid=code;
	                                    
	                }
	                if(index==2){
	                    this.countyList=res.data.data;
	                        // this.where.areaid=code;                                        
	                }

	            } else {                     
	              this.$message({
			          showClose: true,
			          message: res.data.msg,
			          type: 'warning'
		        	});
	            }            
	        }).catch(error=> {
	           this.$message({
		          showClose: true,
		          message: error.data.msg,
		          type: 'error'
		        });
	        });     
	    },  
	    Pass(item,houseOperation){
			this.RejectPassParam.houseId=item.houseId;
			this.RejectPassParam.houseOperation=houseOperation;
			this.RejectPassParam.version=item.version;
			this.RejectPassParam.id=item.id;			
			this.$confirm('确定通过该房源信息？')
			.then(_ => {
				this.$store.dispatch('postform',{param:this.RejectPassParam,url:this.RejectPassUrl}).then(() => {
	                if(this.addEdit.code==0){
	                  this.$message({
	                    message: this.addEdit.msg,
	                    type: 'success'
	                  });                	                       				
					 this.$store.dispatch('getlist',{param:this.param,url:this.url});    
	                }else{
	                   this.$message({
	                    message: this.addEdit.msg,
	                    type: 'warning'
	                  }); 
	                }              
				}).catch(() => {
					this.$message({
						message: this.addEdit.msg,
						type: 'success'
					});                  
				})
			})
			.catch(_ => {
				
			});
		},
		Reject(item,houseOperation){
			  	    	
	    	this.$refs.detailDialogReject.loadDialogData(item,'驳回',this.RejectPassUrl,houseOperation);	  
	    }
	  
			   
  
	},
	created() {  
	
		this.$store.dispatch('getlist',{param:this.param,url:this.url});   
		this.address(this.cityId,0); 	                   
    },
    mounted(){
      	let keyval=JSON.parse(  
        localStorage.getItem("loginInfo")
        ).sysDeptDTO.deptLevelEnum.key;  //是 省1    市 2  区 3                       
        if(keyval==1||keyval==0){                                      
            this.shengStatus=true ;
             var sheng=JSON.parse(localStorage.getItem("loginInfo")).sysDeptDTO.provinceCode;    
            this.address(sheng,1);                                  
        }else if(keyval==2){  
            var sheng=JSON.parse(localStorage.getItem("loginInfo")).sysDeptDTO.provinceCode;    
            this.address(sheng,1);  
             this.shengStatus=true ;                        
             var shi=JSON.parse(localStorage.getItem("loginInfo")).sysDeptDTO.cityCode; 
             this.param.cityid=shi; 
            this.shiStatus=true ; 
            
            this.address(shi,2);  

        }else{
            var qu =JSON.parse(localStorage.getItem("loginInfo")).sysDeptDTO.areaCode; 
             this.param.areaid=qu; 
        }                                          
    },
    computed:{
    	...mapState(['list','addEdit'])
    }
}
</script>
<style >
.houseBox .tableList .dizhi{
	width: 300px;
	display: inline-block;
	white-space: nowrap;  
	text-overflow:ellipsis; 
	overflow:hidden;	
}
.houseBox .tableList .el-table th.gutter{
    display: table-cell!important;
}
.houseBox .tableList .el-table td:nth-of-type(4){
	width:300px;

}

</style>

